<template>
  <div>
    <app-header></app-header>
    <div style="text-align:right;height:40px;line-height:40px;">
      <!--当前播放进度:{{hour}}时{{minute}}分{{second}}秒--><span style="margin-left:10px;color:red;">温馨提示：离开该页面时，请先保存本次学习记录！</span>
    </div>
    <video id="my-video" class="video-js vjs-default-skin" preload="auto" controls style="width:100%;height:500px;">
      <!--<source :src="videoUrl"
        type="application/x-mpegURL" />-->
    </video>
    <div style="text-align:right;height:40px;line-height:40px;">
      <x-button size="mini" type="primary" @click.native="saveRecord">保存本次学习记录</x-button>
    </div>
  </div>
</template>

<script>
    import { XButton } from "vux";
    import { saveCourseWareRecord } from '@/api/trainClass';
    import 'video.js/dist/video-js.css';
    import videojs from 'video.js';
  import 'videojs-contrib-hls';
  import appHeader from "../../components/header";

    export default {
    components: { XButton, appHeader },
        data() {
          return {
            videoUrl: '',
            coursewareId: '',
            studyDuration:'',
            player: null,
            hour: '00',
            minute: '00',
            second: '00',
            time: 0,
            timer: null,
            trainClassId: '',
            courseId:'',
            initStart:false
          }
    },
    created() {
      this.trainClassId = this.$route.query.trainClassId;
      this.courseId = this.$route.query.courseId;
      this.videoUrl = this.$route.query.videoUrl;
      this.coursewareId = this.$route.query.coursewareId;
      this.studyDuration = this.$route.query.studyDuration;
      //this.videoUrl = "http://192.168.13.58/FileServer/CourseFile/VideoFile/outm3u8/00443699a7604f20a402f36bbf2ff8d8/playlist.m3u8";
      this.play();
    },
    beforeDestroy(){
      if (this.player) {
          this.player.pause();
          this.player.reset();
          this.player.dispose();
      }
      clearInterval(this.timer);
    },
        methods: {
            play() {
                var that = this;
                if (that.player) {
                    that.player.src([{ src: that.videoUrl, type: "application/x-mpegURL" }]);
                    that.player.play();
                    that.player.currentTime(this.studyDuration);
                    that.timer = setInterval(function () {
                        //var time = parseInt(that.player.currentTime());
                        that.time += 1;
                        var time = that.time;
                        var hour = parseInt(time / 3600);
                        if (hour < 10) {
                            that.hour = '0' + hour;
                        } else {
                            that.hour = hour;
                        }
                        var minute = parseInt((time - 3600 * hour) / 60);
                        var second = time % 60;
                        if (minute < 10) {
                            that.minute = '0' + minute;
                        } else {
                            that.minute = minute;
                        }
                        if (second < 10) {
                            that.second = '0' + second;
                        } else {
                            that.second = second;
                        }
                    }, 1000);
                } else {
                    setTimeout(function () {
                        that.player = videojs('my-video', {
                            bigPlayButton: false,
                            textTrackDisplay: false,
                            posterImage: true,
                            errorDisplay: false,
                            controlBar: true,
                            preload: 'auto'
                        }, function () {
                            that.player.src(that.videoUrl);
                           this.on('loadedmetadata',function(){
                                 //that.player.load();
                              that.player.play();
                              
                            })
                            this.on('timeupdate',function(){
                              if(that.player.hasStarted()&&!that.initStart&&that.player.currentTime()>0){
                                that.initStart=true;
                                that.player.currentTime(that.studyDuration);
                              }                              
                            })
                           
                          
                           
                            that.timer = setInterval(function () {
                                //var time = parseInt(that.player.currentTime());
                                that.time += 1;
                                var time = that.time;
                                var hour = parseInt(time / 3600);
                                if (hour < 10) {
                                    that.hour = '0' + hour;
                                } else {
                                    that.hour = hour;
                                }
                                var minute = parseInt((time - 3600 * hour) / 60);
                                var second = time % 60;
                                if (minute < 10) {
                                    that.minute = '0' + minute;
                                } else {
                                    that.minute = minute;
                                }
                                if (second < 10) {
                                    that.second = '0' + second;
                                } else {
                                    that.second = second;
                                }
                            }, 1000);
                        });
                    }, 100);
                }

            },
            //closeDialog(done) {
            //    this.$confirm('关闭前请先保存下本次学习记录，若未保存则本次学习记录无效！', '提示', {
            //        confirmButtonText: '确定',
            //        cancelButtonText: '取消',
            //        type: 'warning'
            //    }).then(() => {
            //        done();
            //    }).catch(() => {
            //        return false;
            //    })
            //},
          saveRecord() {
            let that = this;
              var duration = this.time;
              saveCourseWareRecord({
                trainClassId: this.trainClassId,
                courseId: this.courseId,
                courseWareId: this.coursewareId,
                duration: duration,
                studyDuration: parseInt(this.player.currentTime())
              }).then(response => {
                if (response) {
                  //培训评估
                  this.$router.push('/trainEvaluation2?id=' + that.trainClassId + '&cuid=' + that.courseId);
                } else {
                  this.$router.push('/course?id=' + this.trainClassId + '&cuid=' + that.courseId);
                }
             
              });
            
            }
        }
    }
</script>

<style scoped>
</style>
